<template>
  <el-drawer
    title="基于角色授权"
    :visible.sync="drawer"
    :direction="direction"
    :wrapper-closable="false"
    :before-close="handleClose"
    size="50%"
  >
    <div class="drawer-content">
      <div>
        <div class="userTitle"><i class="topIcon el-icon-user" /><span>授权用户</span></div>
        <el-divider />
        <div class="userinfo">
          <div><span class="labelname">姓名</span><span class="value">{{ userInfo.realName }}</span></div>
          <div><span class="labelname">账号</span><span class="value">{{ userInfo.account }}</span></div>
          <div><span class="labelname">所属组织</span><span class="value">{{ userInfo.orgName }}</span></div>
        </div>
      </div>
      <div>
        <div class="userTitle"><i class="topIcon el-icon-setting" /><span>设置角色</span></div>
        <el-divider style="margin-bottom: 0;" />
        <authTable
          ref="table"
          v-loading="loading"
          :is-show-column="false"
          :table-opts="tableOpts"
          :pagination-data="{
            total: total,
            queryParams: filterForm
          }"
          @pagination="pagination"
          @searchReset="handleReset"
          @searchChange="handleQuery"
          @selection-change="handleSelectionChange"
        >
          <template #toolbarBtn>
            <el-input
              v-model.trim="filterForm.roleName"
              maxlength="30"
              placeholder="请输入角色名称"
              style="width:280px"
              size="small"
              clearable
              @keyup.enter.native="handleQuery"
              @clear="handleReset"
            />
            <div class="btnGroup">
              <el-button v-permission="['BUSINESSUSERAUTHORIZATION_ADD_BUTTON']" size="small" type="primary"
                         @click="openAddRole">添加角色</el-button>
              <el-button v-permission="['BUSINESSUSERAUTHORIZATION_DELETEMORE_BUTTON']" size="small" @click="handleDeleteMore">批量移除</el-button>
            </div>
          </template>
        </authTable>
      </div>
    </div>
    <dtSelectRole ref="addRoleRef" v-model="roleIds" :user-id="'2'"
                  :column-props="columnProps" :title="'添加角色'" @input="handleInput" />
  </el-drawer>

</template>
<script>
import bussinessUserAuthorizationApi from '@/framework/api/authCenter/bussinessUserAuthorization/bussinessUserAuthorization'
import dtSelectRole from '@/framework/components/addPerson/dt-select-role.vue'

export default {
  dicts: ['roleType'],
  components: { dtSelectRole },
  data() {
    return {
      api: bussinessUserAuthorizationApi,
      drawer: false,
      direction: 'rtl',
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 用户组织机构关联表格数据
      list: [],
      // 查询参数
      filterForm: {
        userId: '',
        roleName: '',
        pageNo: 1,
        pageSize: 10
      },
      tableOpts: {
        rowKey: 'roleId',
        tableData: [],
        toolbarBtn: [],
        customSearch: [{
        }],
        // 表格第一列
        firstTableCol: {
          select: true,
          width: 55,
          type: 'selection'
        },
        tableCol: [
          // {
          //   prop: 'realName',
          //   label: 'xingming ',
          //   show: true
          // },
          {
            prop: 'roleCode',
            label: '角色编码',
            show: true,
            align: 'left'
          },
          {
            prop: 'roleName',
            label: '角色名称',
            show: true,
            align: 'left'

          },
          {
            prop: 'roleType',
            label: '角色类型',
            show: true,
            align: 'left',
            type: 'dict',
            formatter: () => { return this.dict.type.roleType }
            // formatter: (row) => { return row.roleType === '1' ? '平台' : '第三方' }
          },
          {
            prop: 'followAppName',
            label: '业务应用',
            align: 'left',
            show: true
          }
        ],
        operator: {
          width: 86,
          align: 'left',
          operatorBtn: [
            {
              text: '移除',
              size: 'mini',
              type: 'danger',
              permission: ['BUSINESSUSERAUTHORIZATION_DEL_BUTTON'],
              click: (row, col, cellValue) => {
                return this.handleDelete(row)
              }
            }
          ]
        }
      },
      userInfo: {},
      userId: '',
      multipleSelection: [],
      roleIds: '',
      columnProps: {
        userId: ''
      }
    }
  },
  watch: {
    'filterForm.roleName': function (n, o) {
      this.getList()
    }
  },
  created() {
    // this.getUserInfo()
    // this.getList()
  },
  methods: {
    handleClose(done) {
      this.$refs.table.clearSelection()
      this.filterForm.roleName = ''
      done()
    },
    handleInput() {
      const params = {
        userId: this.userId,
        roleIds: this.roleIds
      }
      bussinessUserAuthorizationApi.addRole(params).then(() => {
        this.$dtMessage({
          type: 'success',
          message: '添加成功'
        })
        this.getList()
      })
    },
    // 多选框选中数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getUserInfo() {
      bussinessUserAuthorizationApi.getUserDetail({ userId: this.userId }).then((res) => {
        this.userInfo = res.data
      })
    },
    openAddRole() {
      this.columnProps.userId = this.userId
      this.$refs.addRoleRef.handleSelectPerson()
    },
    handleDelete(row) {
      const that = this
      this.$dtModal.confirm(`是否确认移除“${row.roleName}”?`).then(() => {
        return bussinessUserAuthorizationApi.deleteRole({ roleIds: row.roleId, userId: that.userId })
      }).then(() => {
        this.$dtMessage({
          type: 'success',
          message: '移除成功'
        })
        this.getList()
      })
    },
    handleDeleteMore() {
      if (!this.multipleSelection || this.multipleSelection.length === 0) {
        this.$dtMessage({
          title: '失败',
          message: '请先选择要批量处理的数据',
          type: 'error',
          duration: 2000
        })
      } else {
        const roleNames = this.multipleSelection.map((res) => {
          return res.roleName
        }).join(',')
        this.$dtMessageBox({
          title: '提示',
          message: `是否确认移除“${roleNames}”?`,
          type: 'warning'
        }).then(() => {
          const roleIds = this.multipleSelection.map((res) => {
            return res.roleId
          }).join(',')
          bussinessUserAuthorizationApi.deleteRole({ roleIds, userId: this.userId }).then(() => {
            this.$dtMessage({
              type: 'success',
              message: '批量移除成功'
            })
            this.$refs.table.clearSelection()
            this.getList()
          })
        })
      }
    },
    getList() {
      this.loading = true
      this.filterForm.userId = this.userId
      bussinessUserAuthorizationApi.getUserRoleList(this.filterForm).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.filterForm.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.filterForm = {
        roleName: '',
        pageNo: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    pagination() {
      this.getList(this.filterForm)
    }
  }
}
</script>
<style scoped lang="scss">
.drawer-content{
    padding: 0 24px;
    .userTitle{
        height: 24px;
        font-size: 16px;
        font-weight: 400;
        color: #131414;
        line-height: 24px;
        .topIcon{
            font-size: 14px;
            color: var(--themeColor);
            margin-right: 4px;
        }
    }
    .userinfo{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px 20px;
        .labelname{
            width: 58px;
            height: 24px;
            line-height: 24px;
            margin-right: 16px;
            font-size: 14px;
            font-weight: 400;
            color: #131414;
        }
        .value{
            font-size: 14px;
            font-weight: 400;
            color: #606266;
        }
    }
    ::v-deep .table-container{
    padding:0;
    box-shadow:none;
}
}
::v-deep .el-divider--horizontal{
    margin-bottom: 0px;
}
::v-deep .el-drawer__body{
  margin-bottom: 0!important;
}
</style>
